<template>
  <div class="guide">
    <van-swipe
      v-if="false"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(l, i) in imgs" :key="i">
        <van-image :src="l" class="gimg"></van-image>
        <van-button
          type="primary"
          class="gbtn"
          v-if="i == imgs.length - 1"
          @click="gotoWhere({ name: 'main' })"
          >千锋影院</van-button
        >
      </van-swipe-item>
    </van-swipe>

    <van-swipe
      v-if="false"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(l, i) in banner" :key="i">
        <van-image :src="l.imageUrl" class="gimg"></van-image>
        <van-button
          type="primary"
          class="gbtn"
          v-if="i == banner.length - 1"
          @click="gotoWhere({ name: 'main' })"
          >千锋影院</van-button
        >
      </van-swipe-item>
    </van-swipe>

    <my-swiper v-if="false" class="my-swipe" :options="options" id="onebox">
      <!-- <div class="swiper-slide" v-for="(l, i) in imgs" :key="i">
        <van-image :src="l" class="gimg">
          <van-button
            type="primary"
            class="gbtn"
            v-if="i == imgs.length - 1"
            @click="gotoWhere({ name: 'main' })"
            >千锋影院</van-button
          >
        </van-image>
      </div> -->
      <my-swiper-item v-for="(l, i) in imgs" :key="i">
        <van-image :src="l" class="gimg">
          <van-button
            type="primary"
            class="gbtn"
            v-if="i == imgs.length - 1"
            @click="gotoWhere({ name: 'main' })"
            >千锋影院</van-button
          >
        </van-image>
      </my-swiper-item>
    </my-swiper>

    <my-swiper v-if="true" class="my-swipe" :options="options" id="onebox">
      <my-swiper-item v-for="(l, i) in banner" :key="i">
        <van-image :src="l.imageUrl" class="gimg">
          <van-button
            type="primary"
            class="gbtn"
            v-if="i == banner.length - 1"
            @click="gotoWhere({ name: 'main' })"
            >千锋影院</van-button
          >
        </van-image>
      </my-swiper-item>
    </my-swiper>
    <div class="dao" @click="gotoWhere({ name: 'main' })">
      <van-circle
        v-model="currentRate"
        color="#f50"
        size="200px"
        :stroke-width="60"
        :rate="100"
        :speed="20"
        :text="text"
      />
    </div>
  </div>
</template>

<script>
import MySwiper from "../../components/MySwiper.vue";
export default {
  components: { MySwiper },
  name: "guide",
  data() {
    return {
      currentRate: 0,
      imgs: [
        require("@/assets/images/img1.jpg"),
        require("@/assets/images/img2.jpg"),
        require("@/assets/images/img3.jpg"),
        require("@/assets/images/img4.jpg"),
      ],
      banner: [],
      options: {
        observer: true,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        speed: 1000,
        effect: "cube",
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
      },
    };
  },
  computed: {
    text() {
      return 5 - Math.floor(this.currentRate / 20) + " S";
    },
  },
  watch: {
    currentRate(v) {
      if (v == 100) {
        this.gotoWhere({ name: "main" });
      }
    },
  },
  created() {
    var now_month = new Date().getMonth() + 1;
    if (now_month == localStorage.getItem("new_appMonth")) {
      localStorage.appcount++;
      if (localStorage.appcount > 3) {
        this.gotoWhere({ name: "main" });
      }
    } else {
      var month = new Date().getMonth() + 1;
      localStorage.setItem("new_appMonth", month);
      localStorage.setItem("appcount", 1);
    }
  },
  mounted() {
    this.$axios.get("http://47.104.209.44:3333/banner").then((res) => {
      console.log(res);
      this.banner = res.data.banners.slice(0, 4);
    });
  },
};
</script>


<style lang="scss" scoped>
.gbox {
  width: 300px;
  height: 300px;
  background: yellowgreen;
}
.guide {
  width: 100%;
  height: 100%;
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    ::v-deep .van-circle__text {
      color: #f50 !important;
      font-weight: bold;
    }
  }
  .my-swipe {
    width: 100%;
    height: 100%;
    position: relative;
    .gimg {
      width: 100%;
      height: 100%;
    }
    .gbtn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      // z-index: 1000;
    }
  }
}
</style>